<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0 auto;
				padding: 0;
			}
			#outer{
				width: 400px;
				height: 600px;
				margin: 50 auto;
				background-color: greenyellow;
				padding: 10px;
				margin-top: 50px;
				position: relative;
				overflow: hidden;
			}
			#imgLiset{
				list-style: none;
				position: absolute;
				left: 0;
			}
			#imgLiset li{
				float: left;
				margin: 0 10px;
				
			}
			img{
				height: 600px;
				
			}
			#nav{
				position: absolute;
				bottom: 15px;
			}
			#nav a{
				float: left;
				width: 15px;
				height: 15px;
				background-color: red;
				margin:0 5px;
				opacity: 0.5;
			}
			#nav a:hover{
				background-color: black;
			}
		</style>
	</head>
	<body>
		<!-- 创建一个外部的div，未来作为大的容器 -->
		<div id="outer">
			<!-- 创建一个ul，用于放置图片 -->
			<ul id="imgLiset">
				<li><img src="img/0.png"/></li>
				<li><img src="img/1.png"/></li>
				<li><img src="img/2.png"/></li>
				<li><img src="img/3.png"/></li>
				<li><img src="img/4.png"/></li>
				<li><img src="img/0.png"/></li>
			</ul>
			<div id="nav">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
		<script src="../4.12定时器/tools.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var imgLiset = document.getElementById("imgLiset");
			var imgarr = document.getElementsByTagName("img");
			imgLiset.style.width = 420*imgarr.length+"px";
			var nav = document.getElementById("nav");
			var out = document.getElementById("outer");
			nav.style.left = (out.offsetWidth - nav.offsetWidth)/2 + "px";
			var index = 0;
			var allA = document.getElementsByTagName("a");
			allA[index].style.background = "black";
			var indexa;
			var timer;
			for(var i = 0 ; i  < allA.length ; i++){
				allA[i].index = i;
				allA[i].onclick = function(){
					clearInterval(timer);
					index = this.index;
					// imgLiset.style.left = -408 * this.index + "px";
					setA();
					allA[this.index].style.backgroundColor = "black";
					move(imgLiset,-408*this.index,20,"left",function(){
						aoutchange();
					})
				};
			}
			aoutchange();
			function setA(){
				if(index > imgarr.length - 1){
					index = 1;
					imgLiset.style.left = 0;
				}
				for(var i = 0 ;i<allA.length;i++){
				allA[i].style.backgroundColor = "";
				}
				indexa = index;
				if(index > imgarr.length - 2){
					indexa =0;
				}
				allA[indexa].style.backgroundColor = "black";
			}	
			function aoutchange(){
				timer = setInterval(function(){
					index++;
					setA();
					// index = index%imgarr.length;
					// allA[this.index].style.backgroundColor = "black";
					move(imgLiset,-408*this.index,20,"left",function(){})
				},3000)
			}
		</script>
	</body>
</html>
